1 19:09:14
<template id="table1">
  <div>

    <table border="1">
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>头像</th>
        <th>著作</th>
        <th>国籍</th>
        <th>作者简介</th>
        <th>操作</th>
      </tr>
      <tr v-for="index in list">
        <td v-for="value in index">{{value}}</td>
        <td> <button @click="del(index.id)">删除</button>/
          <button @click="update(index)">修改</button></td>
      </tr>

    </table>
    <div>
      <form>
        姓名: <input v-model="author.name"/><br>
        性别:<input v-model="author.sex"><br>
        头像:<input v-model="author.head"><br>
        著作：<input v-model="author.magnum"><br>
        国籍：<input v-model="author.abj"><br>
        作者详情:<input v-model="author.brief"><br>
        <button type="submit" @click="add()">提交</button>
      </form>
    </div>
    <div>
      <form>
        id:<input  v-model="author1.id" /><br>
        姓名: <input v-model="author1.name"/><br>
        性别:<input v-model="author1.sex"><br>
        头像:<input v-model="author1.head"><br>
        著作：<input v-model="author1.magnum"><br>
        国籍：<input v-model="author1.abj"><br>
        作者详情:<input v-model="author1.brief"><br>
        <button type="submit" @click="upd()">提交</button>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'AuthorManager',

  data () {

    return {
      list: [],
      author1:{id:"",name:"",sex:"",head:"",magnum:"",abj:"",brief:""},
      author:{name:"",sex:"",head:"",magnum:"",abj:"",brief:""}
    }
  },
  components:{
    "table1":{
      template:"table1",
      props:{
        list:[],
        title:""
      }
    }
  },
  created() {
    this.$http.post('/author/select').then(data=>{
      this.list = data;
    })
  },
  methods:{
    del(id){
      // alert(id);
      // var params = new URLSearchParams();
      // params.append('id', '70');
     this.author.id=id;
    alert(id);
      this.$http.post("/author/delete",this.author);
      //$.post("http://localhost:8080/texture/select");
      window.location.reload();
    },
    add(){
      this.$http.post("/author/insert", this.author).then(add=>{
        //alert(add);
        if(add>0){
          alert("添加成功");
          window.location.reload();
        }else{
          alert("添加失败")
        }
      })
    },
    update(item){
      this.author1.id=item.id;
      this.author1.name=item.name;
      this.author1.sex=item.sex;
      this.author1.head=item.head;
      this.author1.magnum=item.magnum;
      this.author1.abj=item.abj;
      this.author1.brief=item.brief;
    },
    upd(){
      this.$http.post("/author/update",this.author1).then(add=>{
        //alert(add);
        if(add>0){
          alert("修改成功");
          window.location.reload();
        }else{
          alert("修改失败")
        }
      });
    },
  }
}
</script>

<style scoped>

</style>

